import 'package:clipboard/clipboard.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

import '../data/mock_data.dart';

class My extends StatelessWidget {
  const My({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取屏幕宽度
    double screenWidth = MediaQuery.of(context).size.width;
    Size cardSize = Size.square((screenWidth - 12 * 2 - 8) / 2);
    print("screenWidth = ${screenWidth}");

    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.open_in_new_rounded),
          ),
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.settings_outlined),
          ),
        ],
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(horizontal: 12),
        children: [
          Row(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Image.network(MockData.iconList[0], width: 56, height: 56, fit: BoxFit.cover),
              ),
              SizedBox(width: 8),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("PHEAIO", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600, color: Color(0xFF141519))),
                  SizedBox(height: 8),
                  Row(
                    children: [
                      Text("Fans", style: TextStyle(color: Color(0xFF86909C), fontSize: 12, fontWeight: FontWeight.w600)),
                      SizedBox(width: 4),
                      Text("9", style: TextStyle(color: Color(0xFF000000), fontSize: 14, fontWeight: FontWeight.w600)),
                      SizedBox(width: 12),
                      Text("Follow", style: TextStyle(color: Color(0xFF86909C), fontSize: 12, fontWeight: FontWeight.w600)),
                      SizedBox(width: 4),
                      Text("16", style: TextStyle(color: Color(0xFF000000), fontSize: 14, fontWeight: FontWeight.w600)),
                    ],
                  )
                ],
              ),
              Expanded(
                flex: 1,
                child: SizedBox(width: 0),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.arrow_right_outlined, size: 32)
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                flex: 1,
                child: SelectableText("Blockchain：${MockData.Blockchain}",
                  maxLines: 1,
                  style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w600,
                    color: Color(0xFF86909C),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ),
              IconButton(
                  onPressed: () {
                    FlutterClipboard.copy(MockData.Blockchain).then((value) => {
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(
                          content: Text('已复制到剪切板')
                        ),
                      )
                    });
                  },
                  icon: Icon(Icons.content_copy, size: 16)
              ),
            ],
          ),
          SizedBox(height: 16),
          // 快捷入口
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Column(
                children: [
                  // Image.network(MockData.imgList[0], width: 45, height: 45, fit: BoxFit.cover),
                  SvgPicture.asset(
                    'assets/svg/wallet.svg',
                    semanticsLabel: 'Wallet',
                    height: 40,
                    width: 40,
                    color: Color(0xFF0082FF).withOpacity(0.33),
                    colorBlendMode: BlendMode.srcIn,
                  ),
                  SizedBox(height: 8),
                  Text("Wallet", style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.black)),
                ],
              ),
              Column(
                children: [
                  // Image.network(MockData.imgList[1], width: 45, height: 45, fit: BoxFit.cover),
                  SvgPicture.asset(
                    'assets/svg/order_form.svg',
                    semanticsLabel: 'Order Form',
                    height: 40,
                    width: 40,
                    color: Color(0xFF0082FF).withOpacity(0.33),
                    colorBlendMode: BlendMode.srcIn,
                  ),
                  SizedBox(height: 8),
                  Text("Order Form", style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.black)),
                ],
              ),
              Column(
                children: [
                  // Image.network(MockData.imgList[2], width: 45, height: 45, fit: BoxFit.cover),
                  SvgPicture.asset(
                    'assets/svg/query.svg',
                    semanticsLabel: 'Query',
                    height: 40,
                    width: 40,
                    color: Color(0xFF0082FF).withOpacity(0.33),
                    colorBlendMode: BlendMode.srcIn,
                  ),
                  SizedBox(height: 8),
                  Text("Query", style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.black)),
                ],
              ),
              Column(
                children: [
                  // Image.network(MockData.imgList[3], width: 45, height: 45, fit: BoxFit.cover),
                  SvgPicture.asset(
                    'assets/svg/news.svg',
                    semanticsLabel: 'News',
                    height: 40,
                    width: 40,
                    color: Color(0xFF0082FF).withOpacity(0.33),
                    colorBlendMode: BlendMode.srcIn,
                  ),
                  SizedBox(height: 8),
                  Text("News", style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: Colors.black)),
                ],
              ),
            ],
          ),
          SizedBox(height: 12),
          // 合集
          Row(
            children: [
              Text("Collection", style: TextStyle(color: Colors.black, fontSize: 18, fontWeight: FontWeight.w700)),
              SizedBox(width: 28),
              Text("Sold", style: TextStyle(color: Color(0xFF86909C), fontSize: 18, fontWeight: FontWeight.w700)),
            ],
          ),
          SizedBox(height: 12),
          Wrap(
            spacing: 8,
            runSpacing: 16,
            children: MockData.imgList.map((item) => Column(
              children: [
                Container(
                  width: cardSize.width,
                  height: cardSize.height,
                  margin: EdgeInsets.only(bottom: 4),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    image: DecorationImage(
                      image: NetworkImage(item),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 8),
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      maxWidth: cardSize.width - 8 * 2,
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('Mechanical 003', style: TextStyle(
                          fontSize: 15,
                          fontWeight: FontWeight.w700,
                          color: Color(0xFF141519),
                        )),
                        SizedBox(height: 8),
                        Row(
                          children: [
                            Container(
                              width: 30,
                              height: 30,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(15),
                                image: DecorationImage(
                                  image: NetworkImage(item),
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                            SizedBox(width: 4),
                            Text("pheaio", style: TextStyle(
                              fontSize: 13,
                              fontWeight: FontWeight.w400,
                              color: Color(0xFF86909C),
                            )),
                            Expanded(flex: 1, child: SizedBox()),
                            Text("￥520", style: TextStyle(
                              color: Color(0xFF000000),
                              fontSize: 18,
                              fontWeight: FontWeight.w700,
                            )),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            )).toList(),
          ),
          SizedBox(height: 50),
        ],
      ),
    );
  }
}
